/* 控制整体盒子样式 */
.app-container {
  padding: 20px 20px 0px 20px;
}
.table-box {
  padding: 20px 0px 20px 20px;

}
.table-dec {
  font-size: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
}
tr .title {
  color: #303133;
  font-size: 50px;
  font-weight: 700px;
}
.table-dec tr {
  color: #606266;
  font-size: 14px;
  font-weight: 400;
}
.table-box td {
  width: 500px;
  height: 40px;
}
/* 右侧表情盒子 */
.box {
  /* width: 602px; */
  height: 390px;
  display: flex;
  background: #e5e9f2;
  justify-content: center;
  /* 主轴对齐方式*/
  align-items: center;
  /* 交叉轴对齐方式 */
  min-height: 4.3125rem;
  /* 阴影高度 */
  box-shadow: 0px 0px 5px #888888;
}
.box .rating {
  position: relative;
  display: flex;
  flex-direction: row-reverse;
  /* 弹性盒布局方向: 反向行 */
}
.box .rating input {
  display: none;
  /* 隐藏 */
}
.box .rating label {
  position: relative;
  width: 0;
  /* 宽度 */
  height: 128px;
  cursor: pointer;
  /* 鼠标样式 */
  transition: 0.5s;
  filter: grayscale(1);
  /* 灰阶过渡 */
  text-align: center;
  /* 字体水平居中 */
  opacity: 0;
  /* 透明度 */
}
.box .rating:hover label {
  width: 160px;
  opacity: 0.2;
}
.box .rating input:hover + label,
.box .rating input:checked + label {
  /* 悬停和选择时进行触发 */
  /* 通过修改灰阶和透明度进行显示 */
  filter: grayscale(0);
  opacity: 1;
  width: 160px;
}
.box img {
  height: 100%;
}
/* 图标下字体 */
.box .rating label h4 {
  color: #000;
  font-size: 24px;
  /* 字体大小 */
  padding-top: 10px;
  font-weight: 500;
  /* 字体维度 */
  white-space: nowrap;
  /* 不换行 */
  opacity: 0;
  transform: translateY(-50px) scale(0);
  /* Y轴移动，放大 */
  transition: 0.5s;
}
.box .rating input:hover + label h4,
.box .rating input:checked + label h4 {
  opacity: 1;
  transform: translateY(0px) scale(1);
}
/* 标题 */
.box .text {
  position: absolute;
  top: -90px;
  left: 50%;
  transform: translateX(-50%);
  color: #0f0202;
  width: 500px;
  font-weight: 700;
  letter-spacing: 2px;
  /* 字体间距 */
  text-align: center;
}
/* 整体样式 */
/* 表格和表情空隙位置 */
.table {
  margin-right: 20px;
  margin-bottom: -14px;
}
/* 行样式 */
.el-row {
  margin-bottom: 5px;
  /* box-shadow: 0px 0px 5px #888888; */
}
/* 列样式 */
.el-col {
  border-radius: 4px;
  /* box-shadow: 0px 0px 5px #888888; */
}
/* 表格颜色 */
.el-table .red {
  background: #f57672;
}
.el-table .yellow {
  background: #f1f572;
}
.el-table .green {
  background: #bef1b4;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
/* 设置下部进度条标签样式 */
#Process-box {
  background-color: #e5e9f2;
  box-shadow: 0px 0px 5px #888888;
  /* width: 500px; */
  height: 230px;
  margin-right: 50px;
}
#Process-box3 {
  margin-left: 15px;
  background-color: #e5e9f2;
  box-shadow: 0px 0px 5px #888888;
  width: 450px;
  height: 300px;
}
.Process-box2 {
  background-color: #e5e9f2;
  /* 控制表格高度 */
  /* margin-top: */
  height: 230px;
  margin-left: 15px;
  box-shadow: 0px 0px 5px #888888;
}
.ProcessLabel {
  border-radius: 50px;
  margin-left: 10px;
  margin-bottom: 4px;
}
.grid-content {
  border-radius: 50px;
  text-align: center;
  /* background-color: rgb(235, 238, 245); */
  background: white;
}
.processGap {
  margin-bottom: 10px;
  margin-right: 20px;
}
.pageRating {
  color: #909399;
  font-size: 20px;
  /* 字体大小 */
  padding-top: 10px;
  font-weight: 500;
}
#firstFP {
  margin-top: 10px;
}
